<!-- 课程详情头部 -->
<template>
    <div class="detail-header-wrapper">
        <div class="info-left">
            <LazyImage :src="detailData.cover" class-name="logo-img" />
        </div>
        <div class="info-right">
            <div class="course-name-option-wrap">
                <div class="course-name-wrap">
                    <div class="course-name">
                        <Ellipsis :content="detailData.title"></Ellipsis>
                    </div>
                    <span v-if="detailData.state && [1, 2, 3, 4].includes(detailData.state)" :class="'mooc-status-'+ detailData.state">{{stateArr[detailData.state]}}</span>
                </div>
                <div>
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="编辑"
                        placement="top">
                      <i class="iconfont icon-bianji mooc-option-iconfont" @click="editMooc"></i>
                    </el-tooltip>
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="预览"
                        placement="top">
                      <i class="iconfont icon-yulan mooc-option-iconfont" @click="preview"></i>
                    </el-tooltip>
                    <el-popover
                        placement="bottom-end"
                        trigger="hover"
                        width="120px"
                        popper-class="more-popover">
                        <template #reference>
                            <i class="iconfont icon-gengduo mooc-option-iconfont"></i>
                        </template>
                        <ul class="more-popover-list">
                            <li v-if="detailData.state === 1 || detailData.state === 3" @click="submitMooc">提交审核</li>
                            <li @click="deleteMooc">删除</li>
                        </ul>
                    </el-popover>
                </div>
            </div>
            <div class="info-item">
                {{classList}}
            </div>
            <div class="info-item mar-t8">
                <div class="mooc-detail-grade">
                    <span class="name">年级：</span>
                    <div class="grade">
                        <Ellipsis :content="handleAloneGrade(detailData.gradeList, '-')"></Ellipsis>
                    </div>
                </div>
                <div class="mooc-detail-stage">
                    <span class="name">学段学科：</span>
                    <div class="stage">
                        <Ellipsis :content="handleAloneStageSubject(detailData.stageSubjectList, '-')"></Ellipsis>
                    </div>
                </div>
            </div>
            
            <div class="info-item mar-t8">
                <span class="item-label">
                    学时：
                </span>
                <span :class="[{'class-hour': detailData.classHour != undefined}]">{{detailData.classHour != undefined ? detailData.classHour : '-'}}</span>
            </div>
            <div v-if="detailData.lecturerList && detailData.lecturerList.length" class="lecturer-list-wrap">
                <el-popover
                    v-for="(item, index) in detailData.lecturerList"
                    :key="index"
                    placement="bottom-start"
                    width="334px"
                    trigger="hover"
                    popper-class="lecturer-popover">
                    <template #reference>
                        <span class="lecturer-item-wrap">
                            <img :src="item.picture || ImgHead" alt="">
                            <span>{{item.name && item.name.length > 3 ? item.name.slice(0, 3) + '...' : item.name}}</span>
                        </span>
                    </template>
                    <div class="lecturer-item-popover">
                        <img :src="item.picture || ImgHead" alt="">
                        <div class="lecturer-info">
                            <p class="lecturer-name">{{item.name}}</p>
                            <p class="lecturer-workplace">{{item.workPlace}}</p>
                            <p class="lecturer-description">{{item.description || '暂无简介'}}</p>
                        </div>
                    </div>
                </el-popover>
            </div>
        </div>
    </div>
</template>

<script setup>
import LazyImage from '@/components/lazy-image/lazy-image.vue';
import Ellipsis from '@/components/ellipsis.vue';
import ImgHead from '@/assets/img/mooc/img-head.png';
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import Confirm from '@/components/confirm/confirm.js';
import Message from '@/components/message/message.js';
import { jumpHref } from '@/router/jumpHref';
import { handleAloneStageSubject, handleAloneGrade } from '@/lib/biz-tools.js'

const store = useStore();

const route = useRoute();

const emit = defineEmits(['update:detail', 'refresh'])

const props = defineProps({
    detail: {
        type: Object,
        default: () => {
            return {};
        }
    },
    type: {
        type: String,
        default: 'index'
    }
})

const stateArr = ['', '待提审', '审核中', '审核未通过', '已发布']

const detailData = computed(() => {
    return props.detail;
})

const classList = computed(() => {
    let list = detailData.value.classifyList || [];
    let arr = [];
    arr = fmtClassList(arr, list);
    return arr.length && arr.join(' > ');
})

function fmtClassList(arr, list) {
    list.length && list.forEach(item => {
        arr.push(item.name);
        if(item.children && item.children.length) {
             fmtClassList(arr, item.children);
        }
    });
    return arr;
}

// 预览
function preview() {
   G_go({name: 'previewDetail', params: {moocId: route.params.moocId }}, true);
}

// 编辑
function editMooc () {
    if (!(props.detail.state === 1 || props.detail.state === 3)) {
        let message = props.detail.publishState === 1 && props.detail.state === 4 ? '该慕课已发布，请取消发布后再操作' : '该慕课正在审核中，无法操作';
        G_dispatchEvent('toast', { message, type: 'error' })
        return;
    }
    let query = window.location.search.substring(1);
    let vars = query.split("&");
    let len = vars.length;
    let queryObj = {}
	for (let i = 0; i < len; i++) {
	    let pair = vars[i].split("=");
        queryObj[pair[0]] = pair[1];
    }
    G_go({name: 'edit', params: {moocId: route.params.moocId }, query: queryObj}, false);
}

// 提交审核
function submitMooc () {
    if(!detailData.value.classifyList || !detailData.value.classifyList.length){
        return G_dispatchEvent('toast', { message: '请点击编辑按钮，完善慕课分类信息', type: 'error'})
    }
    Confirm({
        title: '确认提交审核吗？',
        text: '审核通过后将会发布到慕课广场'
    }).then(res => {
        G_transmit('publishMooc', {
            name: 'publishMooc',
            queries: {
                id: route.params.moocId,
                publishState: 1
            }
        }).then((res) => {
            G_dispatchEvent('toast', { message: '提交审核成功', type: 'success'})
            emit('refresh');
            setTimeout(() => {
                back();
            }, 2000)
        }).finally(() => {
        })
    }).catch(_err => {
        console.log(_err);
    })
}

// 删除确认弹窗
function deleteMooc () {
    if(detailData.value.buyUserCount) {
        Message({ text: '已经有学员报名该慕课，不允许删除', type: 'error' });
        return
    }
    Confirm({
        title: '确认删除慕课吗？',
        text: '删除后将不可恢复，确认删除吗？',
    }).then(res => {
        delMooc();
    }).catch(_err => {
        console.log(_err);
    })
}

// 删除慕课
function delMooc () {
    G_transmit('moocDelete', {
        queries: { id: route.params.moocId },
        message: false
    }).then(res => {
        if (res.status.code === 200) {
            Message({ text: '删除成功', type: 'success' });
            setTimeout(() => {
                back();
            }, 2000)
        }
    }).catch((err) => {
        Message({ text: err.status.desc || err.message || '删除失败', type: 'error' });
        console.log(err);
    })
}

function getBackUrl() {
    let query = window.location.search.substring(1);
    return jumpHref.mooc.moocList(query);
}
function back () {
    let url = getBackUrl();
    G_go(url);
}

onMounted(() => {

})


</script>

<style lang="scss" scoped>
.flex-start {
    display: flex;
    align-items: center;
}
.detail-header-wrapper {
    color: var(--srt-main-text-color);
    padding: 20px;
    border-radius: 4px;
    box-sizing: border-box;
    width: 1200px;
    display: flex;
    position: relative;
    text-align: left;
    background-color: #ffffff;

    .info-left {
        position: relative;
        width: 280px;
        height: 158px;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 20px;
        .logo-img {
            width: 100%;
            height: 100%;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .info-right {
        flex: calc(100% - 300px) 0 0;
        width: calc(100% - 300px);
        .detail-btn {
            padding: 6px 10px !important;
            margin-left: 14px;
        }
        .course-name-option-wrap {
            margin-top: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .course-name-wrap {
            display: flex;
            align-items: flex-start;
            .mooc-status-1,
            .mooc-status-2,
            .mooc-status-3,
            .mooc-status-4 {
                margin-left: 8px;
                font-size: 12px;
                font-weight: 400;
                padding: 2px 6px;
                border-radius: 4px;
            }
            .mooc-status-1,
            .mooc-status-2 {
                color: #FF9201;
                border: 1px solid #FFCA83;
            }
            .mooc-status-3 {
                color: #FF4719;
                border: 1px solid #FFA38C;
            }
            .mooc-status-4 {
                color: #00B042;
                border: 1px solid #7BE0A1;
            }
        }

        .course-name {
            max-width: 576px;
            font-size: 18px;
            text-align: left;
            font-weight: bold;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .user-cover {
            width: 22px;
            height: 22px;
            object-fit: cover;
            border-radius: 50%;
            margin-right: 4px;
        }

        .info-item {
            display: flex;
            margin-top: 10px;
            font-size: 14px;
            line-height: 22px;
            color: var(--srt-main-text-color);
            // @include ellipsisOne();
            .item-label {
                color: var(--srt-color-gray);
            }
            .class-hour {
                font-size: 20px;
                font-weight: bold;
            }
            &:last-child {
                margin-bottom: 0px;
            }
        }
        .mar-t8 {
            margin-top: 8px;
        }
        .mooc-detail-grade,
        .mooc-detail-stage {
            display: flex;
            align-items: center;
            .name {
                color: var(--srt-color-gray);
            }
            .grade {
                max-width: 200px;
            }
            .stage {
                max-width: 450px;
            }
        }
        .mooc-detail-grade {
            font-size: 14px;
            line-height: 22px;
            padding-right: 13px;
        }
        .mooc-detail-stage {
            padding-left: 14px;
            font-size: 14px;
            line-height: 22px;
            position: relative;
             &::before {
                position: absolute;
                top: 4px;
                left: 0;
                content: '';
                display: inline-block;
                // top: 3px;
                width: 1px;
                height: 14px;
                background: #E0E2E4;
            }
        }
        .btn {
            margin-top: 16px;
        }
    }
    .mooc-option-iconfont {
        margin-left: 16px;
        cursor: pointer;
        font-size: 20px;
        color: var(--srt-color-light-gray);
        &:hover {
            color: var(--srt-color-primary);
        }
    }
    .lecturer-list-wrap {
        // overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        margin-top: 13px;
        margin-right: -16px;
        .lecturer-item-wrap {
            margin-right: 16px;
            display: flex;
            align-items: center;
            img {
                width: 22px;
                height: 22px;
                border: 1px solid #F5F5F5;
                border-radius: 50%;
                vertical-align: text-bottom;
                border: 1px solid #F5F5F5;
            }
            span {
                font-size: 14px;
                margin-left: 6px;
                display: inline-block;
                // max-width: 42px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            &:hover {
                img {
                    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.26);
                }
                span {
                    color: var(--srt-color-primary);
                }
            }
        }
    }
}
.more-popover-list {
    li {
        line-height: 36px;
        font-size: 14px;
        line-height: 32px;
        font-family: MicrosoftYaHei;
        color: var(--srt-main-text-color);
        text-align: center;
        cursor: pointer;
        &:hover {
            background: #E7F1FF;
            border-radius: 4px;
        }
    }
}
.lecturer-item-popover {
    display: flex;
    img {
        width: 100px;
        height: 132px;
        border-radius: 4px;
        margin-right: 14px;
    }
    .lecturer-info {
        width: calc(100% - 114px);
        color: var(--srt-main-text-color);
        line-height: 1;
        .lecturer-name {
            font-size: 16px;
            margin-top: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lecturer-workplace {
            width: 100%;
            font-size: 14px;
            margin-top: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lecturer-description {
            width: 100%;
            color: var(--srt-color-gray);
            margin-top: 14px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /* 这里是超出几行省略 */
            overflow: hidden;
            line-height: 18px;
            font-size: 12px;
        }
    }
}
</style>

<style lang="scss">
.more-popover {
    min-width: 120px!important;
    // right: -8px!important;
    // top: -9px!important;
    padding: 6px !important;
    border: none!important;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.14)!important;
}
.lecturer-popover {
    width: 334px!important;
    padding: 14px !important;
    border: none!important;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.14)!important;
}
.more-option-btn {
    border: none;
    padding: none;
    font-size: 20px;
    color: var(--srt-color-light-gray);
    .iconfont {
        &:hover {
            color: var(--srt-color-primary);
        }
    }
}
</style>
